<!--
* Description: 接口检查页面，检查最新的数据更新，展示待添加和待删除列表
* Company: 联宝（合肥）电子科技有限公司
* Author: Dongxu.Ni
* Date: 2020/3/9 13:41
-->

<template>
  <div v-loading="isRequesting">
    <el-row>
      <el-col :span="24" style="padding: 0">
        <!--待添加列表-->
        <div style="background: #c9d2ca;text-align: left">待添加列表</div>
      </el-col>
    </el-row>
    <el-row>
      <!--待添加列表表格-->
      <el-table :data="tableData" height="400px">
        <el-table-column align="left" :label="$t('Api.apiPath')" min-width="300px" prop="apiPath" />
        <el-table-column align="center" :label="$t('Api.apiNameEn')" width="250">
          <template slot-scope="scope">
            <el-input v-model="scope.row.apiNameEn" size="mini" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Api.apiNameZhCn')" width="250">
          <template slot-scope="scope">
            <el-input v-model="scope.row.apiNameZhCn" size="mini" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Api.apiNameZhTw')" width="250">
          <template slot-scope="scope">
            <el-input v-model="scope.row.apiNameZhTw" size="mini" />
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          :label="$t('Api.requestType')"
          min-width="100"
          prop="requestType"
        />
        <el-table-column align="center" :label="$t('Api.group')" min-width="100" prop="group" />
        <el-table-column align="center" :label="$t('Api.keepLog')" width="150">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.keepLog" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Api.isOpen')" width="80">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isOpen" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Api.isForbidden')" width="80">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isForbidden" />
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" :label="$t('Api.stateDiff')">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.waitAdd" size="medium" type="success">
              {{ $t('Api.willAdd') }}
            </el-tag>
            <el-tag v-if="scope.row.waitDel" size="medium" type="danger">
              {{ $t('Api.willDelete') }}
            </el-tag>
          </template>
        </el-table-column>
        <!--操作列-->
        <el-table-column align="center" fixed="right" :label="$t('table.operate')">
          <template slot-scope="scope">
            <!--添加按钮-->
            <el-button
              v-if="scope.row.waitAdd"
              size="mini"
              type="success"
              @click="rowAdd(scope.$index, scope.row)"
            >
              {{ $t('button.add') }}
            </el-button>
            <!--添加按钮-->
            <el-button
              v-if="scope.row.waitDel"
              size="mini"
              type="danger"
              @click="rowDelete(scope.$index, scope.row)"
            >
              {{ $t('button.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { apiAdd, apiDelete, apiQueryDiff } from '../../../../api/sys/api'

export default {
  name: 'ApiCheck',
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      tableData: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.query()
  },
  methods: {
    async query() {
      try {
        this.isRequesting = true
        const response = await apiQueryDiff()
        const waitAddList = response.data.waitAddList
        waitAddList.forEach(t => {
          t.waitAdd = true
          t.waitDel = false
        })
        const waitDelList = response.data.waitDelList
        waitDelList.forEach(t => {
          t.waitAdd = false
          t.waitDel = true
        })
        this.tableData = waitAddList.concat(waitDelList)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    rowAdd(index, row) {
      apiAdd(row).then(() => this.query())
    },
    rowDelete(index, row) {
      apiDelete({ apiPath: row.apiPath }).then(() => this.query())
    }
  }
}
</script>

<style scoped></style>
